import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import { ScaleS, ScaleT, ONE_PIXEL } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'

export default function Title (props) {
  return (
    <View style={styles.container}>
      <View style={styles.line}/>
      <CustomImage style={styles.img1} source={require('@/imgC/member/title_img.png')}/>
      <Text style={styles.title}>{props.title}</Text>
      <CustomImage style={styles.img2} source={require('@/imgC/member/title_img.png')}/>
      <View style={styles.line}/>
    </View>
  )
}
Title.propTypes = {
  style: PropTypes.object,
  title: PropTypes.string
}
const styles = StyleSheet.create({
  container: {
    marginVertical: ScaleS(25),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  line: {
    width: ScaleS(64),
    height: ONE_PIXEL,
    backgroundColor: 'rgba(151, 151, 151, 0.2)',
    marginTop: ScaleS(3)
  },
  img1: {
    marginHorizontal: ScaleS(16)
  },
  img2: {
    marginHorizontal: ScaleS(16),
    transform: [{ rotate: '180deg' }]

  },
  title: {
    width: ScaleS(82),
    height: ScaleS(28),
    textAlign: 'center',
    fontSize: ScaleT(18),
    fontWeight: '500',
    color: '#444444'
  }
})
